<template>
  <div class="deliver">
    <div class="send-to">
      <div class="send-left">服务</div>
      <div class="send-right">
        <div>
          <div class="send-one">
            <div class="phot"></div>
            <div class="pname">已满0元包邮</div>
          </div>
          <div class="send-two">
            <div class="phot"></div>
            <div class="pname">荣耀终端负责</div>
          </div>
        </div>
        <div class="icon1" @click="showPopup"></div>
        <van-popup
          v-model="show"
          closeable
          close-icon="close"
          position="bottom"
          :style="{ height: '60%' }"
        >
          <p class="name2">服务</p>
          <p class="give2">已满0元包邮</p>
          <p class="cash1">由荣耀终端负责发送，并提供售后资讯服务</p>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: 1,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
.deliver {
  width: 20.625rem;
  height: 3.125rem;
  background-color: white;
  margin: 0 auto;
  margin-top: 0.3125rem;
  overflow: hidden;
}
.send-to {
  height: 3.125rem;
  margin-top: 0.3125rem;
  display: flex;
}
.send-left {
  width: 14%;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-top: 0.3125rem;
}
.send-right {
  display: flex;
}
.phot {
  width: 0.8125rem;
  height: 0.8125rem;
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_discount_blue.png)
    no-repeat;
  background-size: 0.8125rem 0.8125rem;
  float: left;
  margin-top: 0.3125rem;
}
.pname {
  float: left;
  font-size: 0.75rem;
  margin-top: 0.3125rem;
}
.icon1 {
  width: 1.25rem;
  height: 1.25rem;
  /* background-color: pink; */
  margin-left: 10.625rem;
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon-more-right.png);
  background-size: 1.5625rem 1.5625rem;
}
.name2 {
  margin-left: 0.625rem;
  font-weight: 700;
}
.give2 {
  font-size: 0.75rem;
  margin-left: 0.625rem;
}
.cash1 {
  font-size: 0.75rem;
  margin-left: 0.625rem;
}

.img {
  width: 100%;
}
img {
  width: 100%;
}
</style>